<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  v-model="queryParams.storeId"
                  placeholder="请选择"
                  filterable
                  @change="changePage"
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.stores"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                prop="queryType"
                label="订单筛选"
                label-width="70px"
              >
                <div class="Order_box">
                  <el-select
                    class="select_ipt"
                    v-model="queryParams.queryType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in queryTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    class="w-200"
                    v-model="queryParams.queryDesc"
                    placeholder="请输入订单号"
                    @keyup.enter.native="handleQuery"
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <!-- <el-form-item label="关单时间" prop="time">
                <el-date-picker
                  v-model="queryParams.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item> -->
              <el-form-item label="关单时间" prop="time">
                <timer
                  ref="timer"
                  :timer.sync="queryParams.time"
                  :isCheck="false"
                ></timer>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="pay_ipt">
                <el-form-item label="支付方式" prop="payType">
                  <el-select
                    class="w-120"
                    v-model="queryParams.payType"
                    placeholder="请选择"
                    @change="changePage"
                  >
                    <el-option
                      v-for="item in payWayOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="order_ipt">
                <el-form-item label="订单状态" prop="orderStatus">
                  <el-select
                    class="w-200"
                    v-model="queryParams.orderStatus"
                    placeholder="请选择"
                    @change="changePage"
                  >
                    <el-option
                      v-for="item in orderStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="order_ipt">
                <el-form-item label="人员筛选" prop="userId">
                  <el-select
                    class="w-200"
                    v-model="queryParams.userId"
                    placeholder="请选择"
                    filterable
                    remote
                    @change="changePage"
                    :remote-method="remoteMethod"
                  >
                    <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.nickname + '(' + item.stageName + ' )'"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="order_ipt">
                <el-form-item label="订单来源" prop="orderSourceType">
                  <el-select
                    class="w-200"
                    v-model="queryParams.orderSourceType"
                    placeholder="请选择"
                    filterable
                    @change="changePage"
                  >
                    <el-option
                      v-for="item in orderSourceTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">订单列表</div>
        <!-- <div class="op_right">
          <el-button type="primary">订单录入</el-button>
        </div> -->
      </div>

      <div>
        <el-table
          :data="OrderList"
          style="width: 100%"
          v-loading="loading"
          height="484px"
          class="table_list"
          :row-class-name="tableRowClassName"
          :highlight-current-row="false"
        >
          <el-table-column prop="orderNo" label="订单号" width="170px">
            <template slot-scope="scope">
              <div @click="CheckOrder(scope.row)" style="color: #0079fe">
                <span class="orderNo">{{ scope.row.orderNo }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="storeName" label="消费门店" width="150px">
          </el-table-column>
          <el-table-column prop="orderSourceTypeStr" label="订单来源">
          </el-table-column>
          <el-table-column prop="inStoreTypeStr" label="进店方式">
          </el-table-column>
          <el-table-column prop="roomName" label="消费房间"> </el-table-column>
          <el-table-column
            prop="itemName"
            label="消费项目"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column prop="orderMoney" label="订单金额">
          </el-table-column>
          <el-table-column prop="orderMoneyReal" label="实付金额">
          </el-table-column>
          <el-table-column
            prop="payType"
            label="支付方式"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column prop="custName" label="消费客户"> </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态">
            <template slot-scope="scope">
              <div>
                {{ orderStatusObj[scope.row.orderStatus] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orderOpen" label="进店时间" width="160px">
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderList, getPayType } from "@/api/business/order";
import { getStoreInfoList } from "@/api/business/stores";
import timer from "@/components/getTime/timer";
import { listUser } from "@/api/system/user";
export default {
  name: "Storeadminorder",
  components: { timer },
  data() {
    return {
      Stores: [],
      OrderList: [],
      loading: false,

      queryTypeOptions: [
        {
          value: "O",
          label: "订单编号",
        },
        {
          value: "M",
          label: "顾客手机号",
        },
        {
          value: "R",
          label: "房间名称",
        },
        {
          value: "P",
          label: "支付单号",
        },
        // {
        //   value: "L",
        //   label: "关联单号",
        // },
      ],

      payWayOptions: [],

      orderSourceTypeOptions: [
        {
          value: "S",
          label: "门店",
        },
        {
          value: "P",
          label: "小程序",
        },
      ],

      orderStatusOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "O",
          label: "已开房",
        },
        {
          value: "W",
          label: "待结账",
        },
        {
          value: "F",
          label: "已结账",
        },
        {
          value: "C",
          label: "已关单",
        },
        {
          value: "B",
          label: "反结待结",
        },
      ],

      orderStatusObj: {
        O: "已开房",
        W: "待结账",
        F: "已结账",
        C: "已关单",
        B: "反结待结",
      },

      value: "",
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        queryDesc: "",
        queryType: "",
        payType: null,
        orderStatus: null,
        time: [],
        storeId: "",
        userId: "",
        orderSourceType: "",
      },

      // 查询参数
      queryParam: {
        pageNo: 1,
        pageSize: 20,
      },
      userloading: false,
      total: 0,
      userList: [],
      seachUserClientTimeout: null,
    };
  },

  mounted() {},

  created() {
    this.getList();
    // this.getLists();
    this.getSupportStores();
    this.getPayTypeWay();
  },
  methods: {
    tableRowClassName(row, rowIndex) {
      console.log(row, "row");
      if (row.row.handDeduct === "Y") {
        return "rowColor";
      }
      return "";
    },

    // 查询支付方式
    getPayTypeWay() {
      getPayType()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.payWayOptions = data;
          }
        })
        .catch((err) => {});
    },

    // /** 查询用户列表 */
    // getLists() {
    //   this.userloading = true;
    //   listUser(this.queryParam).then((response) => {
    //     this.userList = response.data.list;
    //     this.userloading = false;
    //   });
    // },

    remoteMethod(query) {
      if (query !== "") {
        clearTimeout(this.seachUserClientTimeout);
        this.seachUserClientTimeout = setTimeout(() => {
          this.GetClientList(query);
        }, 500);
      } else {
        this.userList = [];
      }
    },

    GetClientList(query) {
      listUser({
        nickName: query,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.userList = data.list;
            if (data.list === 0) {
              this.queryParams.userId = "";
              this.getList();
            }
          }
        })
        .catch((err) => {});
    },

    changePage() {
      this.getList();
    },
    // 订单录入
    // OrderInput() {
    //   this.$router.push({
    //     path: "/stores/finance/OrderInput",
    //   });
    // },

    // 查询所有门店
    getSupportStores() {
      getStoreInfoList(this.queryParams)
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.Stores = data;
          }
        })
        .catch((err) => {});
    },

    // 订单列表
    getList() {
      this.loading = true;
      let queryParams = JSON.parse(JSON.stringify(this.queryParams));
      if (!!this.queryParams.time) {
        queryParams.orderStartTime = this.queryParams.time[0];
        queryParams.orderEndTime = this.queryParams.time[1];
      }

      delete queryParams.time;
      getOrderList(queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.OrderList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CheckOrder(row) {
      this.$router.push({
        path: "/storeAdminfinance/storeAdminorderDetail",
        query: { orderId: row.orderId },
      });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.queryParams.queryDesc = "";
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.goodTop {
  width: 100%;
  height: 48px;
  background: #ffffff;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 48px;
  padding-left: 16px;
  .good_list {
    margin-right: 32px;
  }

  .good_active {
    color: #0052d9;
    border-bottom: 1px solid #0052d9;
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.Order_box {
  display: flex;
  // margin-left: -50px;
  .select_ipt {
    width: 130px;
    margin-right: 10px;
  }
}

.pay_ipt {
  margin-left: 50px;
}

// .order_ipt {
//   margin-left: -120px;
// }
.table_list {
  color: #000;
  .orderNo {
    cursor: pointer;
  }
}
.table_card {
  padding-right: 50px;
}
::v-deep .el-table .rowColor {
  background: #ff00009e;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent;
}
</style>
